<template>
    <view class="content">
        <topHeader :title="'订单售后'" :color="'#4a92ff'" :back="false"></topHeader>
        <view class="input_box">
            <search></search>
        </view>
        <view class="title_cl">
            <scroll-view class="bottom_scroll" :scroll-x="true" :scroll-left="x">
                <view
                    :class="indentType == index ? 'actTitle' : ''"
                    class="title"
                    v-for="(item, index) in lists"
                    :key="index"
                    :data-id="index"
                    :data-index="index"
                    @click="cutTitleFn(index)"
                    id="top_tit"
                >
                    {{ item.text }}
                    <text class="after" v-if="item.value > 0">{{ item.value }}</text>
                </view>
            </scroll-view>
        </view>
        <!-- 售后订单 -->
        <view class="urgency" v-show="indentType != 1">
            <view class="item_indent" v-for="(item, index) in indentList" :key="index" @click="indentDetalFn(item.id)">
                <text class="one">订单编号</text>
                <view class="tow">
                    <view style="font-weight: 600">{{ item.order_no }}</view>
                    <view class="cen">
                        <text class="text" :style="{ backgroundColor: item.backgroundColor }">{{ item.status_text }}</text>
                    </view>
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>

                <view class="three">
                    <view class="item" style="width: 50%; display: flex; flex-direction: row">
                        <text>买家姓名：</text>
                        <text class="text">{{ item.name }}</text>
                    </view>
                    <text class="item">
                        <text>售后类型：</text>
                        <text class="text1">{{ item.question_type_text }}</text>
                    </text>
                </view>
            </view>
        </view>
        <!-- 售前订单 -->
        <view class="urgency" v-show="indentType == 1">
            <view class="item_indent" v-for="(item, index) in preSalesList" :key="index" @click="indentDetalFn(item.id, 'sq')">
                <text class="one">咨询时间：</text>
                <view class="tow">
                    <view style="font-weight: 600">{{ item.time_text }}</view>
                    <view class="cen">
                        <text class="text" :style="{ backgroundColor: '#1FBB6A' }">{{ item.notes }}</text>
                    </view>
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>

                <view class="three">
                    <view class="item" style="width: 70%; display: flex; flex-direction: row">
                        <text>咨询说明：</text>
                        <text class="text">{{ item.details }}</text>
                    </view>
                    <text class="item">
                        <text>联系方式：</text>
                        <text class="text1">{{ item.type_text }}</text>
                    </text>
                </view>
            </view>
        </view>
    </view>
    <tarbar :currentTab="currentTab"></tarbar>
</template>

<script setup>
import topHeader from '@/pages/components/topHeader.vue';
import tarbar from '@/pages/components/tarbar.vue';
import search from '@/pages/components/search.vue';
import { indentTypeGet, indentGet, consultationApi } from '@/pages/request/loginApi.js';
import { ref, getCurrentInstance } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const instance = getCurrentInstance();
onLoad((option) => {
    indentType.value = option.type || 1;
    consultationFn();
    // indentListFn(indentType.value);
    cutTitleFn(indentType.value);
    onClickItem();
});

const currentTab = ref(); // 当前选中的 tab
const fn = () => {
    const res = getCurrentPages();
    currentTab.value = res[res.length - 1].$page.fullPath;
};
//标题 数字角标
const indengtData = ref({});
async function onClickItem() {
    const res = await indentGet();
    indengtData.value = res.data;
    lists.value.forEach((item) => {
        if (item.text == '全部售后') {
            // item.value = res.data.order_num;
            item.value = 0;
        } else if (item.text == '紧急') {
            item.value = res.data.order_urgent_num;
        } else if (item.text == '待处理') {
            item.value = res.data.order_dcl_num;
        } else if (item.text == '处理中') {
            item.value = res.data.order_clz_num;
        } else if (item.text == '待审核') {
            item.value = res.data.order_dsh_num;
        } else if (item.text == '已完成') {
            // item.value = res.data.order_finish_num;
            item.value = 0;
        } else if (item.text == '纠纷') {
            item.value = res.data.order_jf_num;
        }
    });
}
const lists = ref([
    { text: '全部售后', value: 0 },
    { text: '售前咨询', value: 0 },
    { text: '紧急', value: 0 },
    { text: '待处理', value: 0 },
    { text: '处理中', value: 0 },
    { text: '待审核', value: 0 },
    { text: '已完成', value: 0 },
    { text: '纠纷', value: 0 }
]);
const indentType = ref(1); //滑动定位
const indentList = ref(); //订单数据
// 售前订单
const preSalesList = ref([
    {
        name: '客户',
        phone: '123456789',
        matter: '产品有啥附赠品',
        time: '2024-8-10',
        result: '',
        type: '待处理',
        goods: '超级大灰机 nf-1200'
    }
]);
async function consultationFn() {
    const res = await consultationApi();
    console.log(res);
    preSalesList.value = res.data;
    lists.value[1].value = preSalesList.value.length;
}
const backgroundColor = ref('#1FBB6A');
// 点击自动切换位置 横向滑动位置
function cutTitleFn(index) {
    indentType.value = index;
    const query = uni.createSelectorQuery().in(instance.proxy);
    query
        .select('#top_tit')
        .boundingClientRect((data) => {
            if (index == 3) {
                x.value = (index - 1) * data.width + 26;
            } else if (index == 4) {
                x.value = (index - 1) * data.width + 26;
            } else if (index == 5) {
                x.value = (index - 1) * data.width + 46;
            } else if (index == 2) {
                x.value = (index - 1) * data.width + 26;
            } else if (index == 1) {
                x.value = (index - 1) * data.width;
            } else if (index == 6) {
                x.value = (index - 1) * data.width + 46;
            } else if (index == 7) {
                x.value = (index - 1) * data.width + 46;
            }
        })
        .exec();
    indentListFn(index);
}
const x = ref(0);
// 订单状态颜色 订单列表数据
async function indentListFn(status) {
    if (status != 1) {
        const stanum = status == 0 ? status : status > 1 ? status - 1 : status;
        const res = await indentTypeGet({ status: stanum });
        indentList.value = res.data;
    }

    indentList.value.forEach((item, index) => {
        if (item.status_text == '纠纷') {
            indentList.value[index].backgroundColor = '#E9552D';
        } else if (item.status_text == '已完成') {
            indentList.value[index].backgroundColor = '#1FBB6A';
        } else if (item.status_text == '退款审核') {
            indentList.value[index].backgroundColor = '#9568FE';
        } else if (item.status_text == '处理中') {
            indentList.value[index].backgroundColor = '#5081C2';
        } else if (item.status_text == '待处理') {
            indentList.value[index].backgroundColor = '#FFC556';
        } else if (item.status_text == '紧急') {
            indentList.value[index].backgroundColor = '#DA1C1C';
        }
    });
}
//
function indentDetalFn(id, type) {
    uni.navigateTo({
        url: `/pages/indentVIew/indentVIew?id=${id}&shouqian=${type}`
    });
}
// 分享页面
function onShareAppMessage(res) {
    if (res.from === 'button') {
        // 来自页面内分享按钮
    }
    return {
        title: '售后订单小程序',
        path: '/pages/home/index'
    };
}
</script>

<style scoped lang="scss">
@import 'uview-plus/index.scss';

.content {
    min-height: 100vh;
    background-color: #e5f4ff;

    .title_cl {
        width: 750rpx;
        margin: 0 auto;
        display: flex;
        .bottom_scroll {
            width: 750rpx;
            height: 80rpx;
            white-space: nowrap;
            background-color: #fff;
            padding-right: 15rpx;
            .title {
                display: inline-block;
                padding: 25rpx 6rpx;
                font-size: 32rpx;
                height: 80rpx;
                flex-shrink: 0;
                text-align: center;
                margin: 0 30rpx;
                font-weight: 600;
                position: relative;
                &:nth-child(7) {
                    margin-right: 50rpx;
                }
                .after {
                    padding: 4rpx;
                    border-radius: 16rpx;
                    // width: 30rpx;
                    font-size: 24rpx;
                    // background-color: #ececec;
                    // text-align: center;
                    color: red;
                    font-weight: 600;
                    position: absolute;
                    left: 95%;
                    bottom: 10%;
                }
            }
        }
    }

    .input_box {
        width: 700rpx;
        padding-bottom: 30rpx;
        margin: 0 25rpx;
        display: flex;
        align-items: center;
        .input {
            flex: 1;
            height: 80rpx;
            margin: 60rpx 0;
            background-color: #fff;
            border-radius: 43rpx;
            border: #e9e9e9 solid 1rpx;
        }
        ::v-deep .is-input-border {
            border-radius: 40rpx;
        }
        .search {
            width: 120rpx;
            height: 68rpx;
            margin: 0rpx 16rpx;
            background-color: rgba(62, 134, 227, 1);
            font-size: 36rpx;
            text-align: center;
            line-height: 64rpx;
            border-radius: 12rpx;
        }
    }

    .actTitle {
        color: #049de0;
        &::after {
            display: block;
            content: '';
            background-color: #049de0;
            width: 50%;
            height: 8rpx;
            margin: 0 auto;
            margin-top: 6rpx;
            border-radius: 4rpx;
        }
    }
    .urgency {
        width: 700rpx;
        margin: 0 25rpx;
        padding-top: 15rpx;
        padding-bottom: 150rpx;

        .item_indent {
            width: 700rpx;
            height: 194rpx;
            border-radius: 10rpx;
            display: flex;
            flex-direction: column;
            align-items: self-start;
            font-size: 24rpx;
            background-color: #fff;
            border-radius: 12rpx;
            padding: 20rpx;
            margin-bottom: 20rpx;
            .one {
                color: #049de0;
                padding: 6rpx 12rpx;
                border-radius: 6rpx;
                background-color: rgba(4, 157, 224, 0.2);
            }
            .tow {
                width: 100%;
                margin: 12rpx 0;
                font-size: 32rpx;
                display: flex;
                justify-content: space-between;

                .cen {
                    flex: 1;
                    text-align: right;
                    color: #fff;

                    .text {
                        background-color: red;
                        padding: 6rpx 20rpx;
                        border-radius: 12rpx;
                        font-size: 24rpx;
                    }
                }
                .jiant {
                    width: 40rpx;
                    height: 40rpx;
                }
            }
            .three {
                width: 100%;
                padding: 10rpx;
                display: flex;
                justify-content: space-between;
                background-color: rgba(191, 236, 251, 0.3);
                border-radius: 6rpx;
                .item {
                    color: #66899e;
                    // display: flex;
                    // flex-wrap: nowrap;
                    .text {
                        display: inline-block;
                        width: 60%;
                        color: #000;
                        white-space: nowrap; /* 防止文本换行 */
                        overflow: hidden; /* 隐藏溢出的内容 */
                        text-overflow: ellipsis; /* 在文本溢出时显示省略号 */
                    }
                    .text1 {
                        color: #000;
                    }
                }
            }
        }
    }
}
</style>
